import axios from 'axios'
import React, { Component } from 'react'
import './css/film.css'
import BScroll from 'better-scroll'

function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {
  	var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  else
  {
  	var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight;
}
var height = getClientHeight()
export default class App extends Component {
  state ={
      list:[],
  }
  componentDidMount(){
      axios({
          url:'/api/mmdb/movie/v3/list/hot.json?ct=%E5%B9%BF%E5%B7%9E&ci=20&channelId=4'
      }).then(res =>{
          console.log(res.data.data.hot)
          this.setState({
              list:res.data.data.hot
          },()=>{
              new BScroll('.wrapper')
          })
      })
  }
  render() {
      var datalist = this.state.list.map(item =>
        <div key={item.videoId} className='filmItem'>
            <img src={item.img} alt="" className='itemPic'></img>
            <div className='filmDetail'>
                <div className='filmName'>{item.nm}</div>
                <div className='filmGride'>观众评分：<span className='grade'>{item.sc}</span></div>
                <div className='filmActor'>{item.desc}</div>
                <div className='showInfo'>{item.showInfo}</div>
            </div>
            <div className='buy' onMouseOver={()=>{
                console.log(item.nm)
            }}>购票</div>
        </div>
        )
    return (
      <div>
          <div className='wrapper' style={{height:height,overflow:'hidden'}}>
              <div className='content'>
                {datalist}
              </div>
          </div>
      </div>
    )
  }
}
